<template>
    <div class="mainBox">
        <div class="tables">
            <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                :header-row-style="{
                    textAlign: 'center',
                    height: '25px',
                    backgroundColor: 'var(--main-bgc)',
                }"
                :header-cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :row-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                :cell-style="{
                    backgroundColor: 'var(--main-bgc)',
                }"
                style="width: 100%"
            >
                <el-table-column prop="zw1" label="所属道岔总称" width="130">
                    <template slot-scope="scope">
                        <el-select
                            v-model="from.region"
                            @change="changeSelect"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in selectData"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="zw2" label="转辙机名称" width="130">
                    <template slot-scope="scope">
                        <el-select
                            v-model="from.name"
                            @change="queryData"
                            placeholder="请选择活动区域"
                        >
                            <el-option
                                v-for="item in zzjOption"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="closureMode"
                    label="闭合方式"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="combinedPosition"
                    label="组合位置"
                    width="100"
                >
                </el-table-column>
                <el-table-column prop="zheChaCode" label="辙岔号" width="100">
                </el-table-column>
                <el-table-column
                    prop="gMachineType"
                    label="转辙机类型"
                    width="130"
                >
                </el-table-column>
                <el-table-column prop="zzjCount" label="转辙机数" width="100">
                </el-table-column>
                <el-table-column
                    prop="installationPosition"
                    label="安装位置"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="installationDevice"
                    label="安装装置"
                    width="100"
                >
                </el-table-column>
                <el-table-column prop="boxType" label="箱盒类型" width="100">
                </el-table-column>
                <el-table-column prop="address" label="转辙机">
                    <el-table-column
                        prop="gzzjNumber"
                        label="编 号"
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="gzzjDateProduction"
                        label="出厂日期"
                        width="120"
                    >
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="address" label="电机">
                    <el-table-column prop="gdjNumber" label="编 号" width="110">
                    </el-table-column>
                    <el-table-column
                        prop="gdjDateProduction"
                        label="出厂日期"
                        width="120"
                    >
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="address" label="缺口监测">
                    <el-table-column prop="gqkNumber" label="编 号" idth="120">
                    </el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <div class="search">
            <el-cascader
                v-model="caValue"
                :options="cascaders"
                @change="handleChange"
            ></el-cascader>
        </div>
        <div class="botBox">
            <div class="remark">
                <h3>检修备注</h3>
                <div
                    v-for="(item, index) in remark"
                    :key="index"
                    style="display:flex;margin-bottom:10px;"
                >
                    <div class="time" style="width:180px;flex-shrink:0;">
                        {{ item.remarkTime }}
                    </div>
                    <div>{{ item.content }}</div>
                </div>
            </div>
            <div class="charts">
                <h3 style="margin-left:20px;">动态曲线图</h3>
                <div class="myCharts" ref="myChart"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            tableData: [{}],
            selectData: [],
            zzjOption: [],
            cascaders: [],
            caValue: "",
            from: {
                region: "",
                name: "",
            },
            remark: [],
            options: [],
            min: 9999,
            times: [],
        };
    },
    created() {
        this.$http
            .get(
                "services/app/MachineService/GetStationAndMachineCode"
            )
            .then((res) => {
                this.selectData = res.data.result;
            });
    },
    mounted() {},
    methods: {
        initChart() {
            let dom = this.$refs.myChart;
            let myChart = echarts.init(dom);
            let option = {
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category", // 还有其他的type，可以去官网喵两眼哦
                    data: this.times, // x轴数据
                    // x轴名称样式
                    axisLabel: {
                        interval: 4,
                    },
                    axisTick: {
                        show: false,
                    },
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                },
                textStyle: {
                    color: "#fff",
                },
                legend: {
                    data: ["测试", "调整"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                yAxis: {
                    type: "value",
                    scale: true,
                    min: this.min - 5 < 0 ? 0 : this.min - 5,
                    // y轴名称样式
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                },
                tooltip: {
                    trigger: "axis", // axis   item   none三个值
                },
                series: this.options,
            };
            option && myChart.setOption(option, true);
        },
        changeSelect(e) {
            let option = this.selectData.filter((item) => item.label == e);
            this.zzjOption = option[0].children;
        },
        handleChange(e) {
            this.$http
                .get(
                    `/services/app/MachineDataService/GetAllMachineData?Code=${this.from.name}&JSwitch=${e[0]}&Position=${e[1]}&DataTypeName=${e[2]}`
                )
                .then((res) => {
                    let data = res.data.result;
                    let op1 = {
                        name: "测试",
                        data: [],
                        type: "line",
                    };
                    let op2 = {
                        name: "调整",
                        data: [],
                        type: "line",
                    };
                    this.times = [];
                    data.forEach((item) => {
                        this.times.push(item.time);
                        this.min = Math.min(
                            this.min,
                            item.testData,
                            item.adjustData
                        );
                        op1.data.push(item.testData);
                        op2.data.push(item.adjustData);
                    });
                    this.options = [op1, op2];
                    this.initChart();
                });
        },
        queryData() {
            this.$http
                .get(
                    `services/app/MachineService/GetMachineInfo?machineCode=${this.from.name}`
                )
                .then((res) => {
                    let result = res.data.result;
                    this.tableData = [];
                    for (let i = 1; i < 3; i++) {
                        let data = { zw1: "", zw2: "" };
                        for (let item of Object.keys(result)) {
                            if (i === 1) {
                                if (typeof result[item] === "object") {
                                    data[item] = result[item].firstValue;
                                } else {
                                    data[item] = result[item];
                                }
                            } else {
                                if (typeof result[item] === "object") {
                                    data[item] = result[item].secondValue;
                                } else {
                                    data[item] = result[item];
                                }
                            }
                        }
                        this.tableData.push(data);
                    }
                });
            this.$http
                .get("/services/app/MachineDataService/GetCascader")
                .then((res) => {
                    this.cascaders = res.data.result;
                });
            this.$http
                .get(
                    `/services/app/MachineDataService/GetAllMachineRemark?machineCode=${this.from.name}`
                )
                .then((res) => {
                    this.remark = res.data.result;
                });
        },
        //单元格合并
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //行，列，行下标，列下标( 控制要合并的列 )
            let rowspan = this.tableData.length;
            if ([0, 1, 2, 3, 4, 6, 7, 8, 9].includes(columnIndex)) {
                if (rowIndex !== 0) {
                    return {
                        rowspan: 0, //合并的行数
                        colspan: 1,
                    };
                }
                return {
                    rowspan, //合并的行数
                    colspan: 1,
                };
            }
        },
    },
};
</script>
<style lang="less" scoped>
.mainBox {
    height: calc(100vh - 110px);
}
.tables {
    margin: 10px;
    box-shadow: 0px 1px 3px #0053a1;
}
.search {
    padding-right: 20px;
    margin: 10px;
    box-shadow: 0px 1px 3px #0053a1;
    height: 60px;
    display: flex;
    padding-top: 30px;
    justify-content: flex-end;
}
.botBox {
    margin: 10px;
    height: calc(80% - 120px);
    display: flex;
    justify-content: space-between;
    .remark {
        box-shadow: 0px 0px 6px 0 #0053a1;
        padding-left: 20px;
        padding-right: 20px;
        max-height: 550px;
        width: 48%;
        overflow: auto;
    }
    .charts {
        box-shadow: 0px 0px 6px 0 #0053a1;
        width: 48%;
        max-height: 550px;
        .myCharts {
            height: calc(100% - 63px);
        }
    }
}
.el-table {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 5px;
    /deep/.el-table__row:nth-child(2n + 1) {
        background-color: #f8f8f8 !important;
    }
}

/deep/ .el-cascader {
    .el-input {
        input {
            background-color: var(--input-bgc);
        }
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
}
/deep/ .el-table__header-wrapper .el-table__cell {
    padding: 1px 0;
}
/deep/ .el-table thead {
    color: var(--main-fc);
}
/deep/ .el-table {
    border: none;
    padding: 0;
    .el-table__row {
        border: none;
    }
    input {
        background-color: var(--input-bgc);
    }
    .el-input__inner::placeholder {
        color: var(--input-fc);
    }
    color: var(--main-fc);
}
/deep/ input {
    color: var(--main-fc);
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
}
/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: var(--main-bgc);
}
</style>
